<!--
 * @Description: 班级年度培训计划
 * @Autor: dyx
 * @Date: 2023-05-30 13:52:02
 * @LastEditTime: 2023-06-02 17:17:17
-->

<template>
  <div class="JADP-common-layout">
    <div class="JADP-common-layout-center">
      <el-row class="JADP-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="年份">
              <el-date-picker
                v-model="query.year"
                type="year"
                value-format="yyyy"
                placeholder="请选择年"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-right" @click="reset()"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JADP-common-layout-main JADP-flex-main">
        <div class="TISchedule">
          <div style="padding: 10px">
            <el-button type="primary" style="float: right" @click="exportWord"
              >导出Word</el-button
            >
          </div>
          <div class="mytable">
            <div class="table_title">
              生产经营单位安全生产
              <input
                class="titleInput"
                type="text"
                readonly="readonly"
                v-model="dataForm.year"
              />
              年度培训办班计划表
            </div>
            <el-row class="gaugeOutfit">
              <el-col :span="24" style="padding-left: 10px"
                >单位名称：（盖章）
                <input type="text" v-model="dataForm.pxjg" style="width: 90%" />
              </el-col>
            </el-row>

            <table>
              <tr>
                <td width="6%">序号</td>
                <!-- <td width="18%">
                  培训班编号
                </td> -->
                <td width="18%">培训班名称</td>
                <td width="18%">培训对象</td>
                <td width="30%">培训内容</td>
                <td width="8%">人数</td>
                <td width="8%">总学时</td>
                <td>开班时间</td>
              </tr>

              <tr v-for="(item, index) in list" :key="index">
                <td>
                  <input
                    type="text"
                    v-model="item.xh"
                    readonly="readonly"
                    style="width: 100%; text-align: center"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    v-model="item.pxbmc"
                    readonly="readonly"
                    style="width: 100%"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    v-model="item.pxdx"
                    readonly="readonly"
                    style="width: 100%"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    v-model="item.pxnr"
                    readonly="readonly"
                    style="width: 100%"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    v-model="item.rs"
                    readonly="readonly"
                    style="width: 100%; text-align: center"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    v-model="item.zxs"
                    readonly="readonly"
                    style="width: 100%; text-align: center"
                    oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  />
                </td>
                <td>
                  <!-- <input type="text" v-model="item.kbsj" style="width:100%" /> -->
                  <el-date-picker
                    v-model="item.kbsj"
                    readonly="readonly"
                    type="date"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    style="width: 70%"
                  >
                  </el-date-picker>
                </td>
              </tr>
            </table>

            <!-- <el-row class="gaugeOutfit_bottom">
              <el-col :span="12" style="padding-left:10px"
                >机构负责人：
                <input type="text" v-model="dataForm.jgfzr" readonly="readonly" style="width:70%"
              /></el-col>

              <el-col :span="12" style="padding-left:10px"
                >填表人：
                <input type="text" v-model="dataForm.tbr" readonly="readonly" style="width:80%" />
              </el-col>
            </el-row> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "aaa",
  data() {
    return {
      query: {
        year: undefined,
      },
      list: [],
      dataForm: {},
    };
  },
  created() {
    // 创建10位数组
    this.list = Array.apply(null, { length: 10 }).map(() => {
      return {
        xh: "",
        pxbbh: "",
        pxdx: "",
        pxnr: "",
        rs: "",
        zxs: "",
        kbsj: "",
      };
    });
  },
  methods: {
    initData() {
      request({
        url:
          "/api/class_archives/generateA9/" +
          this.query.year +
          `?organizeId=${this.$store.getters.organizeId}`,
        method: "get",
      }).then((res) => {
        this.dataForm = res.data;
        // console.log(this.dataForm, 123);
        // 创建10位数组
        this.list = Array.apply(null, { length: 10 }).map(() => {
          return {
            xh: "",
            pxbbh: "",
            pxdx: "",
            pxnr: "",
            rs: "",
            zxs: "",
            kbsj: "",
          };
        });
        if (!this.dataForm.childrenVOList) {
          return;
        }
        // 获取数据数组长度
        let lgh = this.dataForm.childrenVOList.length;
        if (lgh < 10) {
          // 替换数组
          this.list.splice(0, lgh, ...this.dataForm.childrenVOList);
        } else {
          this.list = this.dataForm.childrenVOList;
        }
      });
    },
    exportWord() {
      this.dataForm.childrenVOList = this.list;
      for (let key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          this.dataForm[key].forEach((item) => {
            for (let key2 in item) {
              if (item[key2] == null) {
                item[key2] = "";
              }
            }
          });
        } else if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm.organizeId = this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA9Export",
        method: "post",
        data: this.dataForm,
      }).then((res) => {
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "年度培训办班计划表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
    search() {
      if (!this.query.year) {
        return this.$message.warning("请选择年份");
      }
      this.initData();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      //   this.initData();
    },
  },
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "../xy_da_classArchives/components/TABLESTYLE.scss";
input {
  //   border: 1px solid #ccc !important;
}
.titleInput {
  width: 8%;
  height: 20px;
  border-bottom: 1px solid #000 !important;
  font-size: 18px !important;
  font-weight: 700;
  text-align: center;
}
table td {
  padding: 11px 10px !important;
  //   font-size: 16px;
}
.mytable {
  width: 90%;
}
</style>
